<template>
    <div>
        <el-row :gutter="20" class="orderNum">
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content">
                        <i class="el-icon-lx-calendar grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">今日订单总数</div>
                            <div class="num">{{orderNum.todayOrderCount || 0}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content">
                        <i class="el-icon-lx-recharge grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">今日销售总额</div>
                            <div class="num">￥{{orderNum.todayOrderMoney || 0}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content">
                        <i class="el-icon-lx-redpacket grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">昨日销售总额</div>
                            <div class="num">￥{{orderNum.yesterdayOrdersMoneys || 0}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content">
                        <i class="el-icon-lx-roundcheck grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">近7天销售总额</div>
                            <div class="num">¥{{orderNum.sevenOrdersMoneys || 0}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 商品总览 -->
        <!-- <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>商品总览</span>
            </div>
            <el-row class="goodItems">
                <el-col :span="6">
                    <dt>500</dt>
                    <dd>商品池商品</dd>
                </el-col>
                <el-col :span="6">
                    <dt>500</dt>
                    <dd>商品列表商品</dd>
                </el-col>
                <el-col :span="6">
                    <dt>500</dt>
                    <dd>已下架</dd>
                </el-col>
                <el-col :span="6">
                    <dt>500</dt>
                    <dd>已上架</dd>
                </el-col>
            </el-row>
        </el-card> -->
        <!-- 图表 -->
        <!-- <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>订单统计</span>
                <el-date-picker
                    v-model="areaDate1"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    class="daterange"
                    >
                </el-date-picker>
                <el-button v-for="(button, index) in buttons" 
                    :key="index" 
                    type="text" 
                    :class="[chartdata1.dateSelect == button.class ? 'on' : '', 'dataButton']"
                    @click="chartClick1(button)">{{button.text}}</el-button>
            </div>
            <el-row class="goodItems">
                <el-col :span="3" class="borderRight">
                    <div class="card">
                        <dt>本月订单总数</dt>
                        <dd>10000</dd>
                        <p><span>10%</span>同比上周</p>
                    </div>
                    <div class="card">
                        <dt>本周订单数量</dt>
                        <dd>1000</dd>
                        <p><span>10%</span>同比上周</p>
                    </div>
                </el-col>
                <el-col :span="21">
                    <line-example class="schart" :chartData="chartdata1.chartData"></line-example>
                </el-col>
            </el-row>
        </el-card> -->

        <!-- 图表 -->
        <!-- <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>销售统计</span>
                <el-date-picker
                    v-model="areaDate2"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    class="daterange"
                    >
                </el-date-picker>
                <el-button v-for="(button, index) in buttons" 
                    :key="index" 
                    type="text" 
                    :class="[chartdata2.dateSelect == button.class ? 'on' : '', 'dataButton']"
                    @click="chartClick2(button)">{{button.text}}</el-button>
            </div>
            <el-row class="goodItems">
                <el-col :span="3" class="borderRight">
                    <div class="card">
                        <dt>本月销售总额</dt>
                        <dd>100000</dd>
                        <p><span>10%</span>同比上周</p>
                    </div>
                    <div class="card">
                        <dt>本周销售总额</dt>
                        <dd>50000</dd>
                        <p><span>10%</span>同比上周</p>
                    </div>
                </el-col>
                <el-col :span="21">
                    <line-example class="schart" :chartData="chartdata2.chartData"></line-example>
                </el-col>
            </el-row>
        </el-card> -->

        <!-- 商品销售情况 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>商品销售情况(top10)</span>
                <el-date-picker
                    v-model="areaDate3"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    class="daterange"
                    >
                </el-date-picker>
                <el-button v-for="(button, index) in listButtons" 
                    :key="index" 
                    type="text" 
                    :class="[buttonSelect == button.class ? 'on' : '', 'listButton border']"
                    @click="changeList(button)">{{button.text}}</el-button>
            </div>
            <el-row class="goodItems">
                <el-table
                    ref="list"
                    border
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%;">
                    <el-table-column
                      property="index"
                      label="排名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      property="productName"
                      label="商品名称">
                    </el-table-column>
                    <el-table-column
                      property="saleCounts"
                      label="销售数量"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      property="subtotalAmounts"
                      label="销售金额"
                      width="200">
                    </el-table-column>
                  </el-table>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import LineExample from '../charts/lineChart.js'
    export default {
        name: 'Home',
        data() {
            return {
                name: this.$cookie.get('ms_username'),
                orderNum: {
                    todayOrderMoney : 0,
                    sevenOrdersMoneys : 0,
                    todayOrderCount : 0,
                    yesterdayOrdersMoneys : 0
                },
                // buttons : [{
                //     text : "本月",
                //     class : "month",
                //     value : 30
                // },{
                //     text : "本周",
                //     class : "week",
                //     value : 7
                // },{
                //     text : "今日",
                //     class : "today",
                //     value : 1
                // }],

                // areaDate1 : '',  //日期区间
                pickerOptions: {
                    disabledDate: (time)=>{
                        return time.getTime() > Date.now();
                    }
                },
                // chartdata1:{
                //     dateSelect : "week",  //所选日期按钮
                //     chartData : {
                //         labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                //         data: [40, 39, 10, 40, 39, 80, 40],
                //         label : "订单统计"
                //     }
                // },

                // areaDate2 : '',  //日期区间
                // chartdata2:{
                //     dateSelect : "week",  //所选日期按钮
                //     chartData : {
                //         labels : ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五'],
                //         data: [12,51,23,62,21,93,29],
                //         label : "销售统计"
                //     }
                // },

                listButtons : [{
                    text : "最近90天",
                    class : "quarter",
                    value : 90
                },{
                    text : "最近30天",
                    class : "month",
                    value : 30
                },{
                    text : "最近7天",
                    class : "week",
                    value : 7
                }],
                areaDate3 : '',  //日期区间
                buttonSelect : 'week',   //当前所选日期按钮
                tableData : []
            }
        },
        components: {
            LineExample
        },
        computed: {
            
        },
        watch : {
            areaDate3(){
                if(this.areaDate3 == ''){
                    return false;
                }else{
                    this.buttonSelect = "";
                    this.getListData(this.util.formatTime.rangeDateTrans(this.areaDate3));
                }
            }
        },
        created(){
            this.getListData(this.util.formatTime.nDayAgo(7)); //默认传值为最近7天，转换为YYYY-MM-DD 00:00:00格式
        },
        methods: {
            // chartClick1(that){
            //     this.chartdata1.dateSelect = that.class; //更改日期选择按钮class
            //     this.chartdata1.chartData = {};  //动态更新数据
            //     this.areaDate1 = '';  //清空日期选择区间
            // },
            // chartClick2(that){
            //     this.chartdata2.dateSelect = that.class; //更改日期选择按钮class
            //     this.chartdata2.chartData = {};  //动态更新数据
            //     this.areaDate2 = '';  //清空日期选择区间
            // },
            changeList(that){
                this.buttonSelect = that.class;
                this.areaDate3 = '';  //清空日期区间选择器
                this.getListData(this.util.formatTime.nDayAgo(that.value));
            },
            getListData(date){
                this.$axios
                    .post("/admin/system/adminHome.json",{
                        productStartTime: date.prevDay,
                        productEndTime: date.nextDay
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.orderNum = {
                                todayOrderMoney : data.data.todayOrderMoney,
                                sevenOrdersMoneys : data.data.sevenOrdersMoneys,
                                todayOrderCount : data.data.todayOrderCount,
                                yesterdayOrdersMoneys : data.data.yesterdayOrdersMoneys
                            }
                            this.tableData = data.data.productList;
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            }
        }
    }

</script>


<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: left;
        font-size: 14px;
        color: #999;
    }
    .grid-cont-right .num{
        color: #666666;
        line-height: 1.7em;
        font-size: 18px;
        font-weight: bold;
    }
    
    .grid-num {
        font-size: 16px;
        color: #999999;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #1abc9c;
    }
    
    .goodItems{
        text-align: center;
        margin-top: 10px;
    }
    .goodItems dt{
        font-size: 28px;
        color: #F04844;
        line-height: 1.7em;
    }
    .orderNum {
        margin-bottom: 30px;
    }

    .schart {
        height: 250px;
        padding: 0 20px;
    }
    

    .card{
        text-align: left;
        margin-bottom: 30px;
    }
    .card dt{
        font-size: 12px;
        color: #989898;
    }
    .card dd{
        font-size: 28px;
        color: #666;
        line-height: 100%;
        margin-bottom: 3px;
    }
    .card p{
        font-size: 12px;
        color: #ccc;
    }
    .card p span{
        color: #00A950;
        margin-right: 4px;
    }
    .el-button {    
        color: #656565;
    }
    .el-button.on{
        color: #409EFF;
    }
    .dataButton,.listButton{
        float: right;
        padding: 3px 0;
    }
    .daterange{
        width: 230px;
        float: right;
        margin-top: -6px;
        margin-left: 15px;
    }
    .listButton{
        display: inline-block;
        padding: 8px 20px;
        background: #fff;
        margin: 0;
        margin-top: -5.5px;
        border-left: none;
    }
    .listButton:last-child{
        border-left: 1px solid #e4e4e4;
    }
    .listButton:hover,.listButton:focus{
        border-color: #e4e4e4;
    }
    .listButton.on,.listButton:hover{
        color: #fff;
        background: #1ABC9C;
    }
</style>
